<template>
    <div class="shortcut-slider">
        <swiper :options="optionsSwiper" class="swiper-top-marquee">
            <swiper-slide v-for="item in noticeList" :key='item' v-text="item"></swiper-slide>
        </swiper>
    </div>
</template>
<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
    data() {
        return {
            optionsSwiper: {
                direction: 'vertical',
                loop: true,
                autoplay: 4000
            },
            noticeList: ['Free 2-Day Shipping On All Orders Of $200+ (See Details)', 'Free Shipping and Free Returns (See Details)']
        }
    },
    components: {
        swiper,
        swiperSlide
    }
}
</script>
<style>
.swiper-top-marquee {
    height: 20px;
    line-height: 20px;
    font-weight: 600;
    color: #000;
}

.swiper-top-marquee .swiper-slide {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

@media (min-width: 768px) {
    .breadcrumbs-warp .shortcut-slider {
        position: absolute;
        right: 0;
        top: 0;
    }
}
</style>
